<!--
author: 何其沆(pooky)
desc: Admin - Others - Statistics - Invoice Number
data: 2022-03-31
-->
<template>
  <div class="invoice-number">
    <Search @search="handleSearch">
      <div style="display: flex">
        <SearchInput searchText="From">
          <a-date-picker picker="month" :disabled-date="disabledDate" v-model:value="fromTime" :allowClear="false" />
        </SearchInput>
        <SearchInput searchText="To">
          <a-date-picker picker="month" :disabled-date="disabledDate" v-model:value="toTime" :allowClear="false" />
        </SearchInput>
        <SearchInput searchText="Date Type">
          <a-select
            v-model:value="dateType"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode"
          >
            <a-select-option label="Client" value="0">Client</a-select-option>
            <a-select-option label="Personnel" value="1">Personnel</a-select-option>
            <a-select-option label="Personnel & Client" value="2">Personnel & Client</a-select-option>
            <a-select-option v-if="isShowBranch" label="Branches" value="3">Branches</a-select-option>
          </a-select>
        </SearchInput>
      </div>
    </Search>
    <InvoiceClient v-if="flag === 0" :fromDate="fromTime" :toDate="toTime" />
    <InvoicePersonnel v-if="flag === 1" :fromDate="fromTime" :toDate="toTime" />
    <InvoicePersonnelAndClient v-if="flag === 2" :fromDate="fromTime" :toDate="toTime" />
    <InvoiceBranches v-if="flag === 3" :fromDate="fromTime" :toDate="toTime" />
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useStore } from 'vuex'
import dayjs from 'dayjs'

import Search from '../../components/Search2.vue'
import SearchInput from '../../components/SearchInput.vue'
import InvoiceClient from './components/InvoiceClient.vue'
import InvoicePersonnel from './components/InvoicePersonnel.vue'
import InvoicePersonnelAndClient from './components/InvoicePersonnelAndClient.vue'
import InvoiceBranches from './components/InvoiceBranches.vue'
import statistics from '@/api/statistics'

const store = useStore()
const oDate = new Date()
const oYear = oDate.getFullYear()
const oMonth = oDate.getMonth() + 1 < 10 ? '0' + (oDate.getMonth() + 1) : '' + (oDate.getMonth() + 1)
const cDate = oYear + '-' + oMonth
const fromTime = ref(dayjs(cDate))
// const fromTime = ref(dayjs(cDate).subtract(3, 'month'))
const toTime = ref(dayjs(cDate))

const dateType = ref('0')
const flag = ref(0)

const timeArr = reactive({
  yearArr: [],
  monthArr: []
})
const isShowBranch = computed(() => store.getters['user/isPrimaryCSO'])

statistics.getInvoiceNumberYear().then(res => {
  if (res.code === 2000) {
    timeArr.yearArr = res.data
  }
})
statistics.getInvoiceNumberMonth().then(res => {
  if (res.code === 2000) {
    timeArr.monthArr = res.data
  }
})
const disabledDate = current => {
  return (
    dayjs(current).format('YYYY') < timeArr.yearArr[0] ||
    dayjs(current).format('YYYY') > timeArr.yearArr[timeArr.yearArr.length - 1]
  )
}

/**
 * 搜索
 */
const handleSearch = () => {
  return new Promise(resolve => {
    flag.value = -1
    resolve()
  }).then(() => {
    flag.value = Number(dateType.value)
  })
}
</script>

<style scoped lang="less">
@import '@/assets/style/reset_form';
</style>
<route lang="yaml">
name: Invoice Number
path: '/statistics-m/invoice-number'
meta:
  sort: 0
</route>
